<template>
  <div class="station-join-container">
    <el-card>
      <h2>申请加入站点</h2>
      <el-form
        ref="applyFormRef"
        :model="applyForm"
        :rules="rules"
        label-width="120px"
        @submit.prevent="handleSubmit"
      >
        <!-- 用户ID（隐藏，从登录态获取） -->
        <el-form-item label="维修员ID" prop="user_id">
          <el-input v-model="applyForm.user_id" disabled />
        </el-form-item>

        <!-- 选择目标站点 -->
        <el-form-item label="目标站点" prop="station_id">
          <el-select
            v-model="applyForm.station_id"
            placeholder="请选择要加入的站点"
            :disabled="isLoading"
          >
            <el-option
              v-for="station in stationList"
              :key="station._id"
              :label="station.name"
              :value="station._id"
            />
          </el-select>
        </el-form-item>

        <!-- 申请备注 -->
        <el-form-item label="申请备注">
          <el-input
            v-model="applyForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请填写申请原因（可选）"
          />
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="isLoading" :disabled="isLoading" native-type="submit">
            {{ isLoading ? '提交中...' : '提交申请' }}
          </el-button>
        </el-form-item>

        <!-- 结果提示 -->
        <div v-if="message" class="message">
          <el-alert :type="messageType" :title="message" show-icon />
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createStationMembershipApplication, getStations } from '@/api/user'
import { ElMessage } from 'element-plus'

// 表单数据（初始化从登录态获取用户ID）
const applyForm = ref({
  user_id: '', // 维修员ID（从localStorage获取）
  station_id: '', // 目标站点ID（必填）
  remark: '', // 备注（可选）
})

// 状态管理
const stationList = ref([]) // 站点列表
const isLoading = ref(false) // 加载状态
const message = ref('') // 提示信息
const messageType = ref('') // 提示类型（success/error）
const applyFormRef = ref(null) // 表单引用

// 表单校验规则
const rules = ref({
  user_id: [{ required: true, message: '维修员ID不能为空', trigger: 'blur' }],
  station_id: [{ required: true, message: '请选择目标站点', trigger: 'change' }],
})

// 初始化：获取当前用户ID和站点列表
onMounted(async () => {
  // 获取登录用户信息（假设存储在localStorage）
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (userInfo) {
    applyForm.value.user_id = userInfo._id // 假设用户ID字段为_id
  }

  // 获取站点列表
  isLoading.value = true
  try {
    const res = await getStations()
    if (res.code === 200) {
      stationList.value = res.data // 假设接口返回站点列表数组
    }
  } catch (err) {
    ElMessage.error('获取站点列表失败', err)
  } finally {
    isLoading.value = false
  }
})

// 提交申请
const handleSubmit = async () => {
  isLoading.value = true
  message.value = ''

  // 表单校验
  const valid = await new Promise((resolve) => {
    applyFormRef.value.validate((valid) => resolve(valid))
  })

  if (!valid) {
    isLoading.value = false
    return
  }

  // 调用申请接口
  try {
    const res = await createStationMembershipApplication(applyForm.value)
    if (res.code === 201) {
      message.value = '申请提交成功！'
      messageType.value = 'success'
      // 重置表单（保留user_id）
      applyForm.value = { ...applyForm.value, station_id: '', remark: '' }
    } else {
      message.value = res.message || '申请提交失败'
      messageType.value = 'error'
    }
  } catch (err) {
    ElMessage.error('申请提交失败', err)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.station-join-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.message {
  margin-top: 15px;
}
</style>
